<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="root"></div>
<script src="../../javascript/react.development.js"></script>
<script src="../../javascript/react-dom.development.js"></script>
<script src="../../javascript/babel.min.js"></script>
<script type="text/babel">
    /*
    * 受控组件通过props获取其当前值，并通过回调函数(比如onChange)通知变化
    * 表单状态发生变化时，都会通知React，将状态交给React进行处理，比如可以使用useState存储
    * 受控组件中，组件渲染出的状态与它的value或checked属性相对应
    * 受控组件会更新state的流程
    * */
    class App extends React.Component {
        constructor(props, context) {
            super(props, context)
            // 初始化表单数据
            this.state = {userName: "", password: ""}
        }

        render() {
            const {userName, password} = this.state
            return (
                <div className="app">
                    <form onSubmit={this.handleSubmit}>
                        <input type="text" value={userName} onChange={this.changeUserName}/>
                        <input type="text" value={password} onChange={this.changePassword}/>
                        <button>登录</button>
                    </form>
                </div>
            );
        }

        changeUserName = (event) => {
            // 保存用户名到状态中
            const value = event.target.value
            this.setState((state) => {
                return {
                    userName: value
                }
            })
        }
        changePassword = () => {
            // 保存密码到状态中
            const value = event.target.value
            this.setState((state) => {
                return {
                    password: value
                }
            })
        }

        handleSubmit=(event)=>{
            // 阻止表单的默认提交行为
            event.preventDefault()
            // 解构赋值拿到数据
            const {userName, password} = this.state
            alert(`用户名是${userName},密码是${password}`)

        }

    }
    ReactDOM.render(<App></App>, document.querySelector("#root"))
</script>
</body>
</html>